<template>
	<view style="height: 95vh;">
		<!-- 顶部 -->
		<u-sticky>
			<view class="topWrapper">
				<view class="searchBox">
					<view class="search">
						<u--input v-model="inputValue" clearable border="none" fontSize="12" placeholder="请输入客户姓名"
							@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" />
					</view>
				</view>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" top="100">
			<!-- <u-radio-group v-model="currentCustomer.memberNo"> -->
			<view class="item" v-for="(item, index) in customerList" :key="item.memberNo">
				<view style="display: flex;align-items: center;" @click.stop="checkedCustomer(item)">
					<!-- 	<view style="display: inline-block;width: 10%;">
							<u-radio active-color="#1573FF" :name="item.memberNo"> </u-radio>
						</view> -->
					<view style="display: inline-block;">

						<view class="text-line">
							<text class="text-name">客户姓名:</text>
							<text v-if="item.memberType==1" class="text-value">{{item.enterpriseName|filterNull}}</text>
							<text v-else class="text-value">{{item.memberName|filterNull}}</text>
						</view>

						<view class="text-line">
							<text class="text-name">客户类型:</text>
							<text class="text-value">{{item.memberType|customerType}}</text>
						</view>

						<view class="text-line">
							<text class="text-name">客户来源:</text>
							<text class="text-value">{{item.memberSource|memberSource}}</text>
						</view>

						<view class="text-line">
							<text class="text-name">联系方式:</text>
							<text class="text-value">{{item.contactPhone|filterNull}}</text>
						</view>



						<!-- 	<view class="text-line">
								<text class="text-name">身份证号:</text>
								<text class="text-value">{{item.locatedStoreName|filterNull}}</text>
							</view> -->
					</view>
				</view>
			</view>
			<!-- </u-radio-group> -->
		</mescroll-body>

		<button type="info" class="sub-btn" @click="addCustomer">新增客户</button>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		memberList
	} from '@/api/home-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				inputValue: '',
				isSearch: false,
				customerList: [],
				currentCustomer: {
					memberNo: ''

				}

			}
		},
		onLoad() {

		},

		methods: {
			upCallback(page) {

				var params = {
					memberName: this.inputValue,
					memberStatus: 1,
					pageNum: page.num,
					pageSize: page.size,
				}

				memberList(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.customerList = []; //如果是第一页需手动制空列表
					this.customerList = this.customerList.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.inputValue = value;
				this.mescroll.triggerDownScroll();
			},
			//选择客户
			checkedCustomer(item) {
				this.currentCustomer = item;
				uni.$emit('chooseCustomer', this.currentCustomer);
				uni.navigateBack({

				})
			},
			// 新增客户
			addCustomer() {
				uni.navigateTo({
					url: '/customer/add'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 80rpx;

		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.city {
				font-size: 30upx;
				font-weight: bold;
				color: #333;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				background-color: #ededed;
				border-radius: 8upx;
			}
		}
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 20rpx 20rpx 0;
		padding: 32rpx 10rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	/deep/ .u-radio-group--row {
		display: inline !important;
	}

	/deep/ .u-radio {
		flex-direction: row-reverse !important;
	}
</style>
